<template>
  <div ref="chart" style="height: 100%;" />
</template>
<script>
import { Chart } from '@antv/g2';
import { getTicks } from '@/utils/chartScale.js';
export default {
  name: 'DodgeBarChart',
  props: {
    data: {
      type: Array,
      required: true
    },
    x: {
      type: String,
      default: 'x'
    },
    y: {
      type: String,
      default: 'y'
    },
    s: {
      type: String,
      default: 's'
    },
    color: {
      type: Array,
      default: () => ['#00E4FF']
    },
    unit: {
      type: String,
      default: 'm'
    },
    minNumber: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    data: {
      handler() {
        this.updateData();
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.initChart();
      this.drawChart();
    });
  },
  methods: {
    getTicks,
    initChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight,
        appendPadding: [22 * ratio, 0, 0, 0]
      });
    },
    drawChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      const s = this.s;
      this.chart.data(this.data);
      this.chart.scale(y, {
        min: this.minNumber,
        tickCount: 5,
        tickMethod: this.getTicks
      });
      this.chart.tooltip({
        shared: true,
        showMarkers: false,
        customItems: (items) => {
          items.forEach((item) => {
            item.value += this.unit;
          });
          return items;
        },
        domStyles: {
          'g2-tooltip-title': {
            fontSize: '.875rem',
            color: '#8D8D8D'
          },
          'g2-tooltip-list-item': {
            fontSize: 0,
            overflow: 'hidden'
          },
          'g2-tooltip-name': {
            fontSize: '.75rem',
            color: '#8D8D8D'
          },
          'g2-tooltip-value': {
            fontSize: '.75rem',
            color: 'rgba(0, 0, 0, 0.6)',
            fontWeight: '780'
          }
        }
      });
      // x轴
      this.chart.axis(x, {
        label: {
          style: {
            fill: '#D9D9D9',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          autoHide: false,
          offset: 7 * ratio
        },
        line: {
          style: {
            stroke: '#FFFFFF',
            strokeOpacity: 0.4,
            lineWidth: 1 * ratio
          }
        },
        tickLine: null
      });
      // y轴
      this.chart.axis(y, {
        label: {
          style: {
            fill: '#8E8E8E',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          offset: 10 * ratio,
          autoHide: false
        },
        grid: {
          line: {
            style: {
              stroke: '#FFFFFF',
              opacity: 0.3,
              lineWidth: 1 * ratio,
              lineDash: [3 * ratio, 3 * ratio]
            }
          }
        }
      });
      // 图例
      this.chart.legend(false);
      // 单位标注
      this.chart.annotation().text({
        content: this.unit,
        position: ['end', 'start'],
        style: {
          fill: '#8E8E8E',
          fontSize: 12 * ratio,
          fontFamily: 'Helvetica-regular'
        },
        background: {
          padding: 2 * ratio
        },
        offsetY: -ref.clientHeight + 26 * ratio,
        offsetX: -ref.clientWidth + 3 * ratio
      });
      this.chart
        .interval({
          background: true
        })
        .position(`${x}*${y}`)
        // .size(20 * ratio)
        .color(s, this.color)
        .adjust([{ type: 'dodge' }])
        .animate({
          appear: {
            animation: 'scale-in-y',
            delay: 0,
            duration: 2000
          }
        });
      this.chart.render();
    },
    // 数据更新
    updateData() {
      this.chart.changeData(this.data);
    }
  }
};
</script>
<style lang="scss" scoped></style>
